<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/public/css/main.css">
    <link rel="stylesheet" href="/static/public/css/markdown.css">
    <link rel="stylesheet" href="/static/public/css/github-dark.min.css">
    <script>
        if (window.self == top.window) {
            window.top.location = '/'
        }
    </script>
    <style>
        .btn {
            width: 95%;
        }

        #temp-data {
            position: fixed;
            top: -1000px;
            left: -1000px;
            width: 1px;
            height: 1px;
            opacity: 0;
            z-index: -1000;
        }

        #app {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        #nav-bar {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: sticky;
            height: fit-content;
            top: 10px;
            left: 5px;
            gap: 10px;
            padding: 15px;
            border-radius: 8px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 0 20px 1px rgb(17, 17, 17);
            max-width: 250px;
            min-width: 180px;
        }
        #nav-bar .btn {color: black;}
        #nav-bar ul {
            list-style-type: none;
        }

        #nav-bar>ul {
            width: 95%;
            max-height: 40vh;
            overflow: auto;
            position: relative;
        }

        #nav-bar>ul ul {
            margin-left: 10px;
        }

        #nav-bar ul li {
            display: flex;
            flex-direction: row;
            flex: 1;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 30px;
            margin-top: 5px;
        }

        #nav-bar ul li a.active {
            background: rgb(0, 180, 0);
            color: white;
            text-shadow: rgba(210, 210, 210) 0 0 15px;
        }

        #nav-bar ul li a {
            width: 100%;
            height: 100%;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            line-height: 30px;
            padding: 0 5px;
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
        }

        #nav-bar ul li a:not(.active):hover {
            background: rgb(17, 17, 17);
            color: rgb(0, 180, 0);
        }

        #article-title {
            padding: 15px;
            margin: 15px;
            border-radius: 8px;
            color: white;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 0 20px 1px rgb(17, 17, 17);
        }

        #main {
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: center;
            align-content: center;
            width: auto;
            overflow: hidden;
        }

        #article-title {
            letter-spacing: 0.1em;
            color: rgb(0, 180, 0);
            font-weight: 800;
            font-size: 2em;
            text-shadow: rgb(0, 50, 0) 0 0 20px;
        }

        #article-title>sub {
            letter-spacing: normal;
            color: white;
            font-weight: 400;
            text-shadow: rgba(100, 100, 100) 0 0 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="nav-bar">
            <input type="button" value="下载源文件" id="download" class="btn">
            <input type="button" value="返回" class="btn">
            <ul><span class="loading"></span></ul>
        </div>
        <div id="main">
            <h1 id="article-title"><span class="loading"></span></h1>
            <div id="article-output" class="markdown"><span class="loading"></span></div>
        </div>
    </div>


    <textarea id="temp-data">{{ id }}</textarea>
</body>
<script src="/static/public/js/socket.min.js"></script>
<script src="/static/public/js/GM.js"></script>
<script src="/static/public/js/marked.min.js"></script>
<script src="/static/public/js/highlight.min.js"></script>
<script src="/static/public/js/article.js"></script>

</html>